<template>
	<div class="sort_arrow">
		<span><slot></slot></span>
		<span class="icon_box">
			<i
				:class="['sort-caret', 'ascending', arrow == 1 ? 'bottom' : '']"
				@click="handle(1)"
			></i>
			<i
				:class="['sort-caret', 'descending', arrow == 2 ? 'top' : '']"
				@click="handle(2)"
			></i>
		</span>
	</div>
</template>
<script>
	export default {
		name: "",
		props: {
			label: {
				type: String | Number,
			},
		},
		computed: {
			arrow() {
				return this.selected ? this.type : "";
			},
		},
		data() {
			return {
				type: "",
				selected: "",
			};
		},
		methods: {
			handle(type) {
				this.selected = true;
				this.type = this.type == type ? "" : type;
				this.$emit("handleSort", {
					type: this.type,
					label: this.label,
				});
			},
		},
	};
</script>
<style lang='scss' scoped>
.sort_arrow {
	display: flex;
	align-items: center;
}

.icon_box {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 34px;
	width: 24px;
	vertical-align: middle;
	cursor: pointer;
	overflow: initial;
	position: relative;
}
.sort-caret {
	width: 0;
	height: 0;
	border: 5px solid transparent;
	position: absolute;
	left: 7px;
}
.ascending {
	border-bottom-color: #c0c4cc;
	top: 5px;
}
.descending {
	bottom: 7px;
	border-top-color: #c0c4cc;
}
.top {
	border-top-color: #409eff !important;
}
.bottom {
	border-bottom-color: #409eff !important;
}
</style>
